<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>视频认证</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="stylesheet" href="../layui/css/layui.css">
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/CSS.css">
    <script src="../js/jquery-3.3.1.js"></script>
    <script src="../layui/layui.all.js"></script>
    <script src="../layui/layui.js"></script>
    <script src="../js/JS.js"></script>
</head>
<style>
    video{
        width:140px;
        height:140px;
        background: url(../img/44c.png) no-repeat;
        background-size: 100% 100%;
        margin: 0 auto;
        position: relative;
        display: block;
    }
</style>
<body style="background: #fff">
<header>
    <a href="javascript:history.back(-1)" class="back"><img src="../img/back.png" height="18px"></a>
    <div class="center title">视频认证</div>
</header>
<!--<video src=""></video>-->
<ul class="scan_ul">
    <li class="scan">
        <img src="" id="picture" alt="">
        <input type="file" accept="image/*" capture="user">
    </li>
    <li>
        请将人脸放入框里扫描
    </li>
    <li><input type="button" name="" value="下一步"></li>
</ul>

<script type="text/javascript">
    var opt = {
        audio: false,
        video: { facingMode: "user" }
    };
    navigator.mediaDevices.getUserMedia(opt).then(function(mediaStream) {
            var video = document.querySelector('video');
            video.srcObject = mediaStream;
            video.onloadedmetadata = function(e) {
                video.play();
            };
        }).catch(function(err) {
            console.log(err.name + ": " + err.message);
        });


    $(".scan").on("change", "input[type=file]", function() {
        $(this).prev().css("opacity","1")
        var filePath = $(this).val();//读取图片路径
        var fr = new FileReader();//创建new FileReader()对象
        var imgObj = this.files[0];//获取图片
        fr.readAsDataURL(imgObj);//将图片读取为DataURL
        var obj = $(this).prev()[0];//
        if(filePath.indexOf("jpg") != -1 || filePath.indexOf("JPG") != -1 || filePath.indexOf("PNG") != -1 || filePath.indexOf("png") != -1) {
            var arr = filePath.split('\\');
            var fileName = arr[arr.length - 1]
            $(this).parent().next().show();
            fr.onload = function() {
                obj.src = this.result;
            };
        }
    });
</script>
</body>
</html>
